<template>
	<view class="container">
		<view class="switch flex-between">
			<text>业绩推送</text>
			<switch :checked="checked" @change="switch1Change" color="#FE4400" />
		</view>
		<template v-if="checked">
			<view class="hz flex-between" @click="qrShow = true">
				<text>推送频次</text>
				<view class="rig flex-center">
					<text>每天推{{chList.length}}次</text>
					<image src="../../static/my/go_btn2.png"></image>
				</view>
			</view>
			<view class="tem">
				<view class="top flex-between">
					<view>推送模板</view>
					<text v-if="curTem >= 0">当前模板:模板{{curTem + 1}}</text>
					<text v-else>暂无使用模板</text>
				</view>
				<!-- <view class="tip">温馨提示:点击参数即可在模板中加入该参数</view> -->
				<view class="tem-btn flex-between">
					<view class="btn" :class="[curTem === index ? 'btn-c' : '']" v-for="(item, index) in temList" :key="index" @click="chTem(index)">{{item}}</view>
				</view>
			</view>
			<view class="res">
				<view class="title">业绩结果</view>
				<view class="edit">
					<template v-if="curTem === 0">
						<view>今日此时段佣金：{今日有效佣金}</view>
						<view>昨日此时段佣金：{昨日有效佣金} </view>
						<view>同一时间段佣金比：{同一时段佣金比}</view>
						<view>--------------------</view>
						<view>今日有效订单：{今日有效订单}</view>
						<view>昨日此时段订单：{昨日有效订单}</view>
						<view>同一时段订单量：{有效订单较昨日增长}</view>
					</template>
					<template v-if="curTem === 1">
						<view>今日有效佣金：{今日有效佣金} </view>
						<view>较昨日增长数：{有效佣金较昨日增长} </view>
						<view>今日有效订单：{今日有效订单} </view>
						<view>较昨日增长数：{有效订单较昨日增长} </view>
					</template>
					<template v-if="curTem === 2">
						<view>今日佣金：{今日有效佣金} ({今日有效订单}单) </view>
						<view>昨日佣金：{昨日有效佣金} ({昨日有效订单}单) </view>
						<view>同比增长：{有效佣金较昨日增长} ({有效订单较昨日增长}单) </view>
					</template>
				</view>
			</view>
			<view class="options flex-between">
				<view class="btn btn-c" @click="save">保存</view>
				<view class="btn" @click="temShow = true">预览模板</view>
			</view>
		</template>
		<!-- 扫码客服弹窗 -->
		<van-dialog class="custom-dialog" use-slot title="推送时间设置" :show="qrShow" :showConfirmButton="false"
		 closeOnClickOverlay @close="qrShow = false">
			<view class="vip-container">
				<view class="time flex-start">
					<view class="li" :class="[chList.includes(item) ? 'li-c' : '']" v-for="(item, index) in day" :key="index" @click="addTime(item, index)">{{item}}点</view>
				</view>
				<view class="options2 flex-center">
					<view class="btn cancel" @click="qrShow = false">取消</view>
					<view class="btn submit" @click="submit">确定</view>
				</view>
			</view>
		</van-dialog>
		<!-- 扫码客服弹窗 -->
		<van-dialog class="custom-dialog-tem" use-slot title="自定义模板预览" :show="temShow" :showConfirmButton="false"
		 closeOnClickOverlay @close="temShow = false">
			<view class="vip-container">
				<view class="tem">
					<view class="titel">业绩查询结果通知</view>
					<view class="tip">以下是您的订单佣金概况</view>
					<view class="time">统计日期：<text>2020-04-02 00:00-09:00</text></view>
					<view class="result flex-between">
						业绩结果：
						<view class="rig">											
							<template v-if="curTem === 0">
								<view>今日此时段佣金：¥0</view>
								<view>昨日此时段佣金：¥0</view>
								<view>同一时间段佣金比：+0%</view>
								<view>- - - - - - - - - - - - - - - - - - - - -</view>
								<view>今日有效订单：0</view>
								<view>昨日此时段订单：0</view>
								<view>同一时段订单量：+0</view>
							</template>
							<template v-if="curTem === 1">
								<view>今日有效佣金：¥0</view>
								<view>较昨日增长数：+¥0</view>
								<view>今日有效订单：0</view>
								<view>较昨日增长数：+0</view>
							</template>
							<template v-if="curTem === 2">
								<view>今日佣金：¥0</view>
								<view>昨日佣金：+¥0</view>
								<view>同比增长：+0</view>
							</template>
						</view>
					</view>
					<view class="remark flex-start">
						<view>备注：</view>
						<text>点击查看订单详情</text>
					</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		tip
	} from '@/utils/tip'
	export default {
		data() {
			return {
				checked: false,
				qrShow: false,
				temShow: false,
				day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
					'21', '22', '23', '24'
				],
				chList: [],
				curTem: 0,
				temList: ['默认模板1', '默认模板2', '默认模板3'],
				id: ''
			};
		},
		onLoad() {
			this.getSetInfo()
		},
		methods: {
			getSetInfo() {
				this.$service.wechatnotices.settingInfo().then((res) => {
					console.log(res)
					this.id = res.id
					this.checked = res.isOpen
					this.curTem = res.template
					this.chList = res.time ? res.time.split(',') : []
				})
			},
			switch1Change(e) {
				this.checked = e.target.value
				console.log(this.$service.wechatnotices)
				this.$service.wechatnotices.add({
					isOpen: this.checked,
					id: this.id
				}).then(async (res) => {
					this.getSetInfo()
				})
			},
			addTime(item, index) {
				console.log(item, index)
				if (this.chList.includes(item)) {
					this.chList = this.chList.filter((fitem) => {
						return fitem != item
					})
				} else {
					this.chList.push(item)
				}
			},
			chTem(index) {
				this.curTem = index
			},
			submit() {
				this.qrShow = false
			},
			save() {
				let params = {};
				params.isOpen = this.checked;
				params.time = this.chList.join(',');
				params.template = this.curTem
				params.id = this.id;
				this.$service.wechatnotices.add(params).then(async (res) => {
					await tip({
						title: '保存成功~'
					})
					this.getSetInfo()
				})
			}

		}
	}
</script>

<style lang="scss">
	.dia {
		width: 100vw;
		height: 100vh;
		background-color: black;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
	}

	.fadeIn {
		-webkit-animation: fadeInDown .3s;
		animation: fadeInDown .3s;
	}

	@keyframes fadeInDown {
		0% {
			-webkit-transform: translate3d(0, -20%, 0);
			-webkit-transform: translate3d(0, -20%, 0);
			transform: translate3d(0, -20%, 0);
			transform: translate3d(0, -20%, 0);
			opacity: 0;
		}

		100% {
			-webkit-transform: none;
			transform: none;
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeInDown {
		0% {
			-webkit-transform: translate3d(0, -20%, 0);
			opacity: 0;
		}

		100% {
			-webkit-transform: none;
			opacity: 1;
		}
	}

	.container {
		padding-top: 24rpx;

		.switch {
			background-color: white;
			height: 96rpx;
			padding: 0 24rpx;

			.van-switch__node {
				width: 44rpx;
				height: 44rpx;
			}

			text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.hz {
			margin-bottom: 24rpx;
			border-top: 2rpx solid #F2F2F2;
			background-color: white;
			height: 96rpx;
			padding: 0 24rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			text {
				font-size: 28rpx;
				font-weight: bold
			}

			view {
				text {
					color: #999999;
					font-weight: normal;
				}
			}
		}

		.tem {
			padding: 0 24rpx;
			background-color: white;

			.top {
				padding-right: 4rpx;
				height: 96rpx;

				text {
					font-size: 28rpx;
					color: black;
				}

				view {
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.top :nth-child(2) {
				color: #999999;
			}

			.tip {
				font-size: 20rpx;
				color: #999999;
				margin-bottom: 36rpx;
			}

			.tem-btn {
				padding-bottom: 36rpx;

				view {
					width: 222rpx;
					height: 64rpx;
					background-color: #FFECE5;
					text-align: center;
					line-height: 64rpx;
					color: $main-color;
					border-radius: 4rpx;
					font-size: 28rpx;
				}

				.btn-c {
					background-color: $main-color;
					color: white;
				}

			}
		}

		.res {
			min-height: 650rpx;
			background-color: white;
			padding: 0 24rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.edit {
				min-height: 320rpx;
				background-color: #FAFAFA;
				border-radius: 4rpx;
				padding: 42rpx;

				view {
					font-size: 24rpx;
					color: #666666;
					line-height: 2em;
				}
			}
		}

		.options {
			width: 100%;
			height: 162rpx;
			padding: 0 126rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: white;

			.btn {
				width: 240rpx;
				height: 72rpx;
				border-radius: 42rpx;
				text-align: center;
				line-height: 72rpx;
				border: 2rpx solid #FFC6B2;
				color: $main-color;
				font-size: 28rpx;
			}

			.btn-c {
				color: white;
				background-color: $main-color;
			}
		}

		/deep/ .custom-dialog {
			text-align: center;

			.van-dialog {
				width: 632rpx !important;
			}

			.van-popup {
				width: 632rpx !important;
			}

			.van-dialog__header {
				padding-top: 28rpx;
				padding-bottom: 34rpx;
			}

			image {
				width: 250rpx;
				height: 250rpx;
			}

			.vip-container {
				padding-bottom: 40rpx;

				.time {
					flex-wrap: wrap;
					margin: 0 auto;
					width: 520rpx;
				}

				.options2 {
					margin-top: 40rpx;

					view {
						width: 212rpx;
						height: 72rpx;
						border-radius: 42rpx;
						text-align: center;
						line-height: 72rpx;
					}

					.cancel {
						border: 2rpx solid #FFECE5;
						color: #FF5A16;
						margin-right: 10rpx;
					}

					.submit {
						background-color: #FF5A16;
						color: white;
						margin-left: 10rpx;
					}
				}

				.li {
					width: 130rpx;
					height: 82rpx;
					line-height: 82rpx;
					text-align: center;
					color: #666666;
					background-color: #FAFAFA;
				}

				.li-c {
					background-color: #FF5A16;
					color: white;
				}
			}
		}

		/deep/ .custom-dialog-tem {
			.van-dialog__header {
				padding-top: 28rpx;
				padding-bottom: 34rpx;
			}

			.vip-container {
				padding-bottom: 50rpx;

				.tem {
					margin: 0 auto;
					width: 540rpx;
					min-height: 564rpx;
					border: 2rpx solid #F2F2F2;
					border-radius: 8rpx;
					padding: 16rpx 24rpx;

					.titel {
						margin-bottom: 8rpx;
					}

					.tip {
						font-size: 20rpx;
						color: #999999;
						margin-bottom: 20rpx;
					}

					.time {
						font-size: 20rpx;
						color: #999999;
						margin-bottom: 12rpx;

						text {
							color: #0C5DFF;
						}
					}

					.result {
						justify-content: flex-start;
						align-items: flex-start;
						font-size: 20rpx;
						color: #999999;

						.rig view {
							font-size: 20rpx;
							color: #0C5DFF;
							line-height: 2em;
						}
					}

					.remark {
						align-items: center;
						margin-top: 26rpx;
						color: #FE4400;
						font-size: 20rpx;

						view {
							font-size: 20rpx;
							color: #999999;
							width: 4em;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>
